<template>
  <div class="demo-login">
    <Login @on-submit="handleSubmit">
      <UserName name="username" value="user3"/>
      <Password name="password" value="password3"/>
      <div class="demo-auto-login">
        <Checkbox v-model="autoLogin" size="large">自动登录</Checkbox>
        <a>忘记密码</a>
      </div>
      <Submit />
    </Login>
  </div>
</template>
<script>
import { getUserInfo } from '@/api'
export default {
  data() {
    return {
      autoLogin: true
    }
  },
  methods: {
    handleSubmit(valid, { username, password }) {
      if (valid) {
        getUserInfo({ username, password }).then((res) => {
          console.log(res);
          if (res.length === 0) {
            this.$Message.error('账号密码错误');
          } else {
            console.log(this.$router);
            this.$router.push('/about')
            this.$Message.success('登陆成功');
            localStorage.setItem('userInfo', JSON.stringify(res[0]))
          }
        })
        // this.$Modal.info({
        //   title: '输入的内容如下：',
        //   content: 'username: ' + username + ' | password: ' + password
        // })
      }
    }
  }
}
</script>
<style scoped>
.demo-login {
  width: 400px;
  margin: 0 auto !important;
  padding-top: 200px;
}
.demo-auto-login {
  margin-bottom: 24px;
  text-align: left;
}
.demo-auto-login a {
  float: right;
}
</style>
